<html>
<head>
    <meta charset="utf-8">
    <script src="<@global.media_js/>jquery-1.10.1.min.js" type="text/javascript"></script>
    <script type="text/javascript" src="<@global.media_js/>moment.min.js"></script>
</head>
<style type="text/css">
    *{
        padding:0;
        margin:0;}
    body{
        font-family: "微软雅黑";
        font-weight: normal;
    }
    #mapContainer{
        position: absolute;
        top: 242px;
        left:0px;
        right:0;
        bottom:0;
    }
    #tip{
        position:absolute;
        bottom: 0;
        right:10px;
        height:80px;
        font-size:12px;
    }
    .layout{
        border:0px solid red;
        height:92%;
    }
    #tip input[type='button']{
        margin-top:10px;
        height:28px;
        line-height:28px;
        outline:none;
        text-align:center;
        padding-left:5px;
        padding-right:5px;
        color:#FFF;
        background-color:#0D9BF2;
        border:0;
        border-radius: 3px;
        margin-top:5px;
        margin-left:5px;
        cursor:pointer;
        margin-right:10px;
    }

    /*** copied from demo #39 添加自定义点覆盖物 ***/
    /* 定义自定义点样式 */
    .markerContentStyle{position:relative;}
    .markerContentStyle span{
        background-color: #FFFFFF;
        color:#FF1493;
        width:120px;
        heigth:80px;
        border:2px solid #D8BFD8;
        FONT-FAMILY:华文行楷;
        position:absolute;
        top:-10px;left:25px;
        white-space:nowrap
        -webkit-border-radius:5px;
        border-radius:5px;
    }

    div.info-top {
        position: relative;
        background: none repeat scroll 0 0 #F9F9F9;
        border-bottom: 1px solid #CCC;
        border-radius:5px 5px 0 0;
    }
    div.info-top div {
        display: inline-block;
        color: #333333;
        font-size:14px;
        font-weight:bold;
        line-height:31px;
        padding:0 10px;
    }
    div.info-top img {
        position: absolute;
        top: 10px;
        right: 10px;
        transition-duration: 0.25s;
    }
    div.info-top img:hover{
        box-shadow: 0px 0px 5px #000;
    }
    div.info-middle {
        font-size:12px;
        padding:10px;
        line-height:21px;
    }
    div.info-bottom {
        height:0px;
        width:100%;
        clear:both;
        text-align:center;
    }
    div.info-bottom img{
        position: relative;
        z-index:104;
    }

    @media (min-width: 768px)
        .zero-clipboard {
            display: block;
        }
        .zero-clipboard {
            position: relative;
        }

        .btn-clipboard-hover {
            color: #fff;
            background-color: #563d7c;
            border-color: #563d7c;
        }

        .btn-clipboard {
            position: absolute;
            top: 0;
            right: 0;
            z-index: 10;
            display: block;
            padding: 5px 8px;
            font-size: 12px;
            color: #767676;
            cursor: pointer;
            background-color: #fff;
            border: 1px solid #e1e1e8;
            border-radius: 0 4px 0 4px;
        }
    #_title{
        position:relative;
        background-color: #16a768;
        padding:30px 50px;
    }
    #_title h1{
            color: #FFF;
        font-size:100px;
        margin-bottom:10px;
     }
        #_title #time{
            font-size:30px;
            color: #FFF;;
        }
    #_title ._titleRight{
        position: absolute;
        top: 20px;
        right:50px;
        text-align: right;
    }
    #_title ._titleRight #count{
        font-size:100px;
        color: #FFF;
    }
    #_title ._titleRight span{
        color: #FFF;
        font-size:30px;
    }

</style>
<div id="_title">
        <h1>司机实时位置状态</h1>

        <label id="time"></label>

<div class="_titleRight">
    <label id="count"></label><br>
    <span>在线司机数量（北京）</span>
</div>
</div>
<div id="mapContainer"></div>
<script type="text/javascript" src="http://webapi.amap.com/maps?v=1.3&key=db4b48fb15aecc4e23ffd395910dd5a6"></script>

<script type='text/javascript'>

    var _PageHeight = document.documentElement.clientHeight,
            _PageWidth = document.documentElement.clientWidth;
    //计算loading框距离顶部和左部的距离（loading框的宽度为215px，高度为61px）
    var _LoadingTop = _PageHeight > 61 ? (_PageHeight - 61) / 2 : 0,
            _LoadingLeft = _PageWidth > 215 ? (_PageWidth - 215) / 2 : 0;
    //在页面未加载完毕之前显示的loading Html自定义内容
    var _LoadingHtml = '';
    $('#tip').html(_LoadingHtml);
    $('#lDiv').hide();
    var map, marker, toolBar;
    var markerInfoList = new Array();
    var polygon;
    var polygons1 = new Array();
    var polygons = new Array();
    var markermoveAlong = null;
    var iconUrls = ["http://images.01zhuanche.com/statics/web/images/dfw.png","http://images.01zhuanche.com/statics/web/images/dfw.png","http://images.01zhuanche.com/statics/web/images/fwz.png","http://api.amap.com/webapi/static/Images/3.png","http://images.01zhuanche.com/statics/web/images/sd.png","http://api.amap.com/webapi/static/Images/5.png","http://api.amap.com/webapi/static/Images/6.png"];
    function driverInfo (driverId){
        parent.f_addTab("tabId"+driverId, '司机个人信息' , "/web/driver/driverInfo?driverId="+driverId);
    }
    function clearMarkerInfo(){
        for(var i=0;i<markerInfoList.length;i++){
            var marker = markerInfoList[i];
            if(marker){
                marker.setMap(null);
            }
        }
        if(polygons1.length>0){
            for(var i=0;i<polygons1.length;i++){
                var _polygon = polygons1[i];
                if(_polygon){
                    _polygon.setMap(null);
                    _polygon.hide();
                }
            }
        }
        if(markermoveAlong != null){
            markermoveAlong.setMap(null);
        }
    }
    function showMap(){

        var tableHtml = '<div id="gridWin" style="background-color: #FFFFFF;" >\
							<form>\
								<div id="searchForm" ></div>\
							</form> \
							<div id="mainGrid" style="margin:0; padding:0"></div>\
					</div>';
        // 初始化地图对象，加载地图
        map = new AMap.Map("mapContainer", {
            //resizeEnable : false,
            //zoomEnable:false,
            zoom:18,
            // 二维地图显示视口
            view : new AMap.View2D({
                center : new AMap.LngLat(116.397428, 39.90923),// 地图中心点
                zoom:18
                // 地图显示的缩放级别
            })
        });
        // 加载鹰眼
        map.plugin([ "AMap.OverView" ], function() {
            // 在地图中添加鹰眼插件
            overView = new AMap.OverView({
                visible : true
                // 初始化显示鹰眼
            });
            map.addControl(overView);
            overView.open(); // 展开鹰眼
        });

        // 加载比例尺插件
        map.plugin([ "AMap.Scale" ], function() {
            scale = new AMap.Scale();
            map.addControl(scale);
            scale.show();
        });
        // 在地图中添加ToolBar插件
        map.plugin([ "AMap.ToolBar" ], function() {
            toolBar = new AMap.ToolBar();
            map.addControl(toolBar);
        });
        var controlUI = null;
        AMap.homeControlDiv = function() {
        };

        AMap.event.addListener(map, "moveend", showDriverPoint);
        AMap.homeControlDiv.prototype = {
            addTo : function(mymap, dom) {
                dom.appendChild(this._getHtmlDom(map));
                this.addMyownEvent();
            },
            addMyownEvent : function(){

                //close hide

                $(".btn-clipboard").click(function(){
                    if(controlUI != null)
                        controlUI.style.display='none';
                    homeControlbtn.style.display='block';
                });
            },
            _getHtmlDom : function(mymap) {
                this.map = mymap;
                // 创建一个能承载控件的<div>容器
                controlUI = document.createElement("DIV");
                controlUI.className = ""; // 设置控件容器的宽度
                controlUI.style.width = "650px"; // 设置控件容器的宽度
                controlUI.style.borderStyle = "solid";
                controlUI.style.borderWidth = "0px";
                controlUI.style.textAlign = "center"; // 设置控件的位置
                controlUI.style.position = "absolute";
                controlUI.style.left = "180px"; // 设置控件离地图的左边界的偏移量
                controlUI.style.top = "1px"; // 设置控件离地图上边界的偏移量
                controlUI.style.zIndex = "300"; // 设置控件在地图上显示 // 设置控件字体样式
                controlUI.style.fontFamily = "Arial,sens-serif";
                controlUI.style.fontSize = "12px";
                controlUI.style.paddingLeft = "4px";
                controlUI.style.paddingRight = "4px";
                controlUI.innerHTML = '';

                // 设置控件响应点击
                controlUI.onclick = function() {
                }
                return controlUI;
            }
        }
        var homeControl = new AMap.homeControlDiv(map); // 新建自定义插件对象
        map.addControl(homeControl);// 地图上添加插件



        function pluginForAmap(map){
            //定义一个插件类 homeControlDiv，AMap为命名空间
            //AMap.homeControlDiv = function(){};
            AMap.homeControlDiv.prototype = {
                addTo: function(map, dom){
                    dom.appendChild(this._getHtmlDom(map));
                },
                _getHtmlDom:function(map){
                    this.map = map;
                    // 创建一个能承载控件的<div>容器
                    var controlUI = document.createElement("div");
                    this.container = controlUI;
                    var cssStr = 'position:absolute;left:70px;top:10px;height:130px;background-color:#FFFFFF;';
                    cssStr += 'border:1px solid #ccc;font-size:14px;line-height:28px;text-align:left;padding-top: 10px;';
                    cssStr += 'padding-left:10px;padding-right:10px;border-radius:3px;';
                    controlUI.style.cssText = cssStr;
                    controlUI.innerHTML = "<img src='http://images.01zhuanche.com/statics/web/images/dfw.png'><span style='line-height: 34px;vertical-align: top;'>：待服务</span><br><img src='http://images.01zhuanche.com/statics/web/images/fwz.png'><span style='line-height: 34px;vertical-align: top;'>：服务中</span><br><img src='http://images.01zhuanche.com/statics/web/images/sd.png'><span style='line-height: 34px;vertical-align: top;'>：锁定</span>  ";

                    // 设置控件响应点击onclick事件
                    controlUI.onclick=function(){
                    }
                    return controlUI;
                }
            }
            //新建自定义插件对象
            var homeControl=new AMap.homeControlDiv(map);
            map.addControl(homeControl);
        }
        pluginForAmap(map);


        function pluginForAmapButton(map){
            //定义一个插件类 homeControlDiv，AMap为命名空间
            AMap.homeControlButton = function(){};
            AMap.homeControlButton.prototype = {
                addTo: function(map, dom){
                    dom.appendChild(this._getHtmlDom(map));
                },
                _getHtmlDom:function(map){
                    this.map = map;
                    // 创建一个能承载控件的<div>容器
                    homeControlbtn = document.createElement("div");
                    this.container = homeControlbtn;
                    var cssStr = 'position:absolute;left:224px;top:10px;height:30px;background-color:#0D9BF2;';
                    cssStr += 'border:1px solid #ccc;font-size:14px;line-height:28px;text-align:left;';
                    cssStr += 'padding-left:10px;padding-right:10px;color:#FFF;border-radius:3px;';
                    homeControlbtn.style.cssText = cssStr;

                    // 设置控件响应点击onclick事件
                    homeControlbtn.onclick=function(){
                        $('#gridWin').show();
                    }
                    return homeControlbtn;
                }
            }
            //新建自定义插件对象
            var homeControlbtnDiv=new AMap.homeControlButton(map);
            map.addControl(homeControlbtnDiv);

        }
        var homeControlbtn = null;
        //pluginForAmapButton(map);

        //自定义右键菜单内容
        var menuContent = document.createElement("div");
        menuContent.innerHTML = "<ul style='margin: 2px; padding: 2px; list-style-type: none; position: relative; background-color: rgb(255, 255, 255); border: 1px solid rgb(175, 175, 175); border-top-left-radius: 3px; border-top-right-radius: 3px; border-bottom-right-radius: 3px; border-bottom-left-radius: 3px; box-shadow: rgb(153, 153, 153) 2px 2px 8px; white-space: nowrap; cursor: pointer;'>"+
                "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap;' onclick='zoomMenu(0)'>缩小</li>"+
                "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px;' onclick='zoomMenu(1)'>放大</li>"+
                "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana; height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px;' onclick='distanceMeasureMenu()'>距离量测</li>"+
                "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap; border-bottom-color: rgb(204, 204, 204); border-bottom-style: solid; border-bottom-width: 1px;' onclick='addMarkerMenu()'>添加标记</li>"+
                "<li style='text-indent: 0.5em; color:blue; font-size:13px;font-family:verdana;height: 20px; line-height: 20px; word-break: break-all; white-space: nowrap;' onclick='showCityDriver()'>选择城市</li></ul>"
        //创建右键菜单
        contextMenu = new AMap.ContextMenu({isCustom:true,content:menuContent});//通过content自定义右键菜单内容

        //地图绑定鼠标右击事件——弹出右键菜单
        AMap.event.addListener(map, 'rightclick', function(e){
            contextMenu.open(map, e.lnglat);
            contextMenuPositon = e.lnglat; //右键菜单位置
        });
        contextMenu.close();
        //右键菜单缩放地图
        function zoomMenu(tag){
            if(tag === 0){	map.zoomOut();}
            if(tag === 1){	map.zoomIn();}
            contextMenu.close();
        }
        function showCityDriver(){
            controlUI.style.display = "block";
            contextMenu.close();
        }
        //右键菜单距离量测
        function distanceMeasureMenu(){
            mousetool.rule();
            contextMenu.close();
        }


        //右键菜单添加Marker标记
        function addMarkerMenu(){
            mousetool.close();
            var marker = new AMap.Marker({
                map: map,
                position: contextMenuPositon, //基点位置
                icon: "http://webapi.amap.com/images/marker_sprite.png", //marker图标，直接传递地址url
                offset: {x:-8,y:-34} //相对于基点的位置
            });
            contextMenu.close();
        }

        // 加载城市查询插件
        AMap.service([ "AMap.CitySearch" ], function() {
            // 实例化城市查询类
            var citysearch = new AMap.CitySearch();
            // 自动获取用户IP，返回当前城市
            citysearch.getLocalCity(function(status, result) {
                // 当结果状态为“complete”且状态信息为“OK”时，解析服务返回结果
                if (status === 'complete' && result.info === 'OK') {
                    if (result && result.city && result.bounds) {
                        var cityinfo = result.city;
                        var citybounds = result.bounds;
                        // alert("您当前所在城市1："+cityinfo+"");
                        // 将地图移动到当前城市
                        map.setBounds(citybounds);
                    }
                }
                // 当结果状态为“complete”且状态信息为其他时，解析服务提示信息
                else {
                }
            });
        });
        // 输入提示
        function autoSearch() {
            var keywords = document.getElementById("keyword").value;
            var auto;
            var autoOptions = {
                pageIndex : 1,
                pageSize : 10,
                city : "" // 城市，默认全国
            };
            auto = new AMap.Autocomplete(autoOptions);
            // 查询成功时返回查询结果
            auto.search(keywords);
        }
        function isContains(cell){
            var lnglat = cell.currentGPSPoint.split(",");
            var ps = new AMap.LngLat(lnglat[0],lnglat[1]);
            var poly ="否";
            for(var i =0 ;i<polygons.length;i++){
                var polygon = polygons[i];
                if(polygon.contains(ps)){
                    poly =	"是";
                }
            }
            return poly
        }
        function showWinInfo(e){
            var info = [];
            var cell = e.getExtData();
            var poly =isContains(cell);
            var onlineStatus = cell["onlineStatus"] == "1" ?"在线":"离线";
            info.push("<img src='" + cell["photoSrc"]+"' style='height:100px;position:relative;float:left;margin:0 5px 5px 0;' />");
            info.push("<br>"+cell["name"]+"  [是否在商圈：<span style='color:red;'>"+poly+"</span>][<span style='color:red;'>"+onlineStatus+"</span>]<br/>");
            info.push("<span style='color:#F00;'>车牌:");
            info.push(cell["licensePlates"]+"</span>");
            info.push("<br>相关车型：");
            info.push(cell["modelName"] + "&nbsp;&nbsp;<br/>电话：");
            info.push(cell["phone"] + "<br/><a  target='_blank' href='javascript:void(0);' onclick='driverInfo(");
            info.push(cell["driverId"] + ");'>详细信息</a>");

            // 初始化一个信息窗口对象
            var infoWindow = new AMap.InfoWindow({
                offset:{x:0,y:-34},
                content:info.join("")
            });
            infoWindow.open(map,e.getPosition());
        }

        function addMarkerInfo(cell){

            if(cell && cell.currentGPSPoint){
                //console.log(cell.currentGPSPoint);
                var lnglat = cell.currentGPSPoint.split(",");

                var ps = new AMap.LngLat(lnglat[0],lnglat[1]);

                var iconUrl = iconUrls[cell.serviceStatus];
                var	marker= new AMap.Marker({
                    data:cell,
                    map:map,
                    position:ps,
                    icon: iconUrl,//marker图标，直接传递地址url
                    offset:{x:-10,y:-34}  //相对于基点的位置new AMap.Pixel(-10,-34)
                });
                //marker.setExtData(cell);
                AMap.event.addListener(marker,'mouseover',function(e){ //鼠标点击marker弹出自定义的信息窗体
                    showWinInfo(e.target);
                });
                AMap.event.addListener(marker,"mouseout",function(e){ //鼠标点击marker弹出自定义的信息窗体
                },marker);

                // markerInfoList.push(marker);
                //if(isSetCenterPoint){
                //   map.setZoom(13);
                //   map.setCenter(ps);
                //}
            }
        }
        //var isSetCenterPoint = true;
        var refreshTasksRunner = new TaskRunner();
        function refreshInfoForDriver(){

            if($("#refreshLabel").attr("run") == "1"){
                //运行时
                stopRefresh();
            }else{
                $("#refreshLabel").attr("run","1");
                refreshTasksRunner.start({
                    interval : 1000,
                    run : function() {
                        $("#refreshLabel").html((5-this.taskRunCount%5) + " 秒后刷新！");
                        if(this.taskRunCount%5 == 0){
                            refreshDataGrid(false);
                        }
                    }});
            }
        }
        function stopRefresh(){
            $("#refreshLabel").attr("run","0");
            refreshTasksRunner.stopAll();
            $("#refreshLabel").html("5秒自动刷新！");
        }
        function refreshDataGrid(pt){
            //isSetCenterPoint =pt;
            $('#list_data').datagrid('reload');
        }

        function MyEvent(data,position){
            this.data = data;
            this.position = position;
            this.getExtData = function(){
                return this.data;
            }
            this.getPosition = function(){
                return this.position;
            }
        }

        function TaskRunner (interval) {
            interval = interval || 10;
            var tasks = [], removeQueue = [], id = 0, running = false,

            // private
                    stopThread = function() {
                        running = false;
                        clearInterval(id);
                        id = 0;
                    },

            // private
                    startThread = function() {
                        if (!running) {
                            running = true;
                            id = setInterval(runTasks, interval);
                        }
                    },

            // private
                    removeTask = function(t) {
                        removeQueue.push(t);
                        if (t.onStop) {
                            t.onStop.apply(t.scope || t);
                        }
                    },

            // private
                    runTasks = function() {
                        var rqLen = removeQueue.length, now = new Date().getTime(), removeArray = function(o) {

                            for ( var i = 0, len = tasks.length; i < len; i++) {
                                if (tasks[i] == o) {
                                    tasks.splice(i, 1);
                                    return i;
                                }
                            }
                        };

                        if (rqLen > 0) {
                            for ( var i = 0; i < rqLen; i++) {
                                removeArray(removeQueue[i]);
                            }
                            removeQueue = [];
                            if (tasks.length < 1) {
                                stopThread();
                                return;
                            }
                        }
                        for ( var i = 0, t, itime, rt, len = tasks.length; i < len; ++i) {
                            t = tasks[i];
                            itime = now - t.taskRunTime;
                            if (t.interval <= itime) {
                                rt = t.run.apply(t.scope || t, t.args || [ ++t.taskRunCount ]);
                                t.taskRunTime = now;
                                if (rt === false || t.taskRunCount === t.repeat) {
                                    removeTask(t);
                                    return;
                                }
                            }
                            if (t.duration && t.duration <= (now - t.taskStartTime)) {
                                removeTask(t);
                            }
                        }
                    };

            this.start = function(task) {
                tasks.push(task);
                task.taskStartTime = new Date().getTime();
                task.taskRunTime = 0;
                task.taskRunCount = 0;
                startThread();
                return task;
            };

            this.stop = function(task) {
                removeTask(task);
                return task;
            };

            this.stopAll = function() {
                stopThread();
                for ( var i = 0, len = tasks.length; i < len; i++) {
                    if (tasks[i].onStop) {
                        tasks[i].onStop();
                    }
                }
                tasks = [];
                removeQueue = [];
            };
        }
    }

    var markers = [];

    function addMarkerInfo(cell){

        var ps = new AMap.LngLat(cell[0],cell[1]);
        var iconUrl = iconUrls[cell[2]];
        var marker= new AMap.Marker({
            //data:cell,
            map:map,
            position:ps,
            icon: iconUrl,//marker图标，直接传递地址url
            offset:{x:-10,y:-34}  //相对于基点的位置new AMap.Pixel(-10,-34)
        });
        marker.setMap(map);
        marker.show();
        markers.push(marker);
    }


    showMap();

    setInterval(function(){
       showDriverPoint();
    },10000);

    function clearPoint(){
        if(markers.length>0){
            for(var i=0;i<markers.length;i++){
                var m = markers[i];
                if(m){
                    m.setMap(null);
                    m.hide();
                }
            }
        }
        markers = [];
    }

    showDriverPoint();
    function showDriverPoint() {
        map.setZoom(13);
        var url = "/driver/map/driverMapData";
        var p = map.getCenter();
        $.post("/driver/map/driverCount",{},function(data){
            $('#count').text(data);
        },'text');
        $.post(url,{lng:p['lng'],lat:p['lat']},function(data){
            if(data){
                clearPoint();
                for(var i=0;i<data.length;i++){
                    var point = data[i];
                    addMarkerInfo(point.split(';'));
                }
            }
        },'json');
    }

    updateMore();
    function updateMore(){
        var dateStr = moment().format("YYYY年MM月DD日 HH:mm:ss");
        $("#time").html("首汽约车 " + dateStr);
        setTimeout(updateMore, 1000);
    }
</script>
